<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>首页 - 蔬记</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
        
        :root {
            --primary-color: #2ecc71; /* 主色调：绿色（象征种植） */
            --background-color: #f8fff8; /* 页面背景色 - 淡绿色 */
        }
        
        * {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }
        
        body {
            background-color: var(--background-color);
        }
        
        /* 自定义动画 */
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0px); }
        }
        
        .float-animation {
            animation: float 6s ease-in-out infinite;
        }
        
        /* 卡片悬停效果 */
        .menu-card {
            transition: all 0.3s ease;
        }
        
        .menu-card:hover {
            transform: translateY(-4px);
        }
        
        /* 底部导航栏 */
        .tab-bar {
            border-top: 1px solid rgba(0, 0, 0, 0.08);
            background-color: white;
        }
        
        .tab-item.active {
            color: var(--primary-color);
            font-weight: 500;
        }
        
        /* 种植提示动画 */
        .daily-tip-item {
            transition: all 0.3s ease;
        }
        
        .daily-tip-item:hover {
            transform: scale(1.02);
        }
    </style>
</head>
<body class="min-h-screen pb-20">
    <!-- 页面头部 -->
    <header class="relative overflow-hidden">
        <div class="bg-gradient-to-r from-green-500 to-emerald-600 text-white p-6 md:p-8">
            <div class="flex items-center justify-between">
                <div class="space-y-2">
                    <h1 class="text-2xl font-bold" id="welcomeTitle">首页</h1>
                    <p class="text-white/90 text-sm" id="welcomeSubtitle">欢迎回来，种植爱好者！</p>
                </div>
                <div class="w-20 h-20">
                    <img src="https://images.unsplash.com/photo-1512058564366-18510be2db19?q=80&w=100&auto=format&fit=crop" 
                         alt="种植插图" class="w-full h-full object-cover rounded-full float-animation">
                </div>
            </div>
        </div>
        <!-- 波浪装饰 -->
        <div class="absolute bottom-0 left-0 right-0 h-12">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" class="w-full h-full fill-current text-[#f8fff8]">
                <path d="M0,160L48,165.3C96,171,192,181,288,176C384,171,480,149,576,144C672,139,768,149,864,160C960,171,1056,181,1152,170.7C1248,160,1344,128,1392,112L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
            </svg>
        </div>
    </header>

    <!-- 主内容区域 -->
    <main class="px-4 py-6">
        <!-- 功能菜单部分 -->
        <section class="mb-8">
            <div class="mb-4">
                <h3 class="text-lg font-semibold text-gray-800">功能菜单</h3>
                <p class="text-sm text-gray-500">选择你需要的功能开始种植之旅</p>
            </div>
            
            <!-- 两行两列网格布局 -->
            <div class="grid grid-cols-2 gap-4">
                <!-- 蔬菜库 -->
                <div class="menu-card bg-white rounded-2xl p-4 shadow-sm" onclick="goToVegetableLibrary()">
                    <div class="flex items-center space-x-3">
                        <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-green-600">
                            <i class="fa fa-book text-xl"></i>
                        </div>
                        <div>
                            <h4 class="font-medium text-gray-800">蔬菜库</h4>
                            <p class="text-xs text-gray-500">浏览蔬菜品种</p>
                        </div>
                    </div>
                </div>

                <!-- 种植知识 -->
                <div class="menu-card bg-white rounded-2xl p-4 shadow-sm" onclick="goToPlantingTips()">
                    <div class="flex items-center space-x-3">
                        <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-green-600">
                            <i class="fa fa-lightbulb-o text-xl"></i>
                        </div>
                        <div>
                            <h4 class="font-medium text-gray-800">种植知识</h4>
                            <p class="text-xs text-gray-500">学习种植技巧</p>
                        </div>
                    </div>
                </div>

                <!-- 种植日志 -->
                <div class="menu-card bg-white rounded-2xl p-4 shadow-sm" onclick="goToLogs()">
                    <div class="flex items-center space-x-3">
                        <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-green-600">
                            <i class="fa fa-pencil text-xl"></i>
                        </div>
                        <div>
                            <h4 class="font-medium text-gray-800">种植日志</h4>
                            <p class="text-xs text-gray-500">记录种植历程</p>
                        </div>
                    </div>
                </div>

                <!-- 提醒中心 -->
                <div class="menu-card bg-white rounded-2xl p-4 shadow-sm" onclick="goToReminders()">
                    <div class="flex items-center space-x-3">
                        <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-green-600">
                            <i class="fa fa-bell text-xl"></i>
                        </div>
                        <div>
                            <h4 class="font-medium text-gray-800">提醒中心</h4>
                            <p class="text-xs text-gray-500">管理种植提醒</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 我的菜园概览 -->
        <section class="mb-8">
            <div class="flex items-center justify-between mb-4">
                <div>
                    <h3 class="text-lg font-semibold text-gray-800">我的菜园</h3>
                    <p class="text-sm text-gray-500">最近种植的蔬菜</p>
                </div>
                <button class="text-green-600 text-sm font-medium" onclick="goToGrowingPlants()">
                    查看全部 <i class="fa fa-chevron-right text-xs ml-1"></i>
                </button>
            </div>
            
            <!-- 菜园预览 -->
            <div class="bg-white rounded-2xl p-4 shadow-sm overflow-hidden">
                <div id="gardenPreview" class="space-y-3">
                    <!-- 预览将通过JavaScript动态添加 -->
                    <div class="text-center py-6 text-gray-500">
                        <i class="fa fa-leaf text-4xl mb-2 block opacity-30"></i>
                        <p>还没有开始种植</p>
                        <button class="mt-2 bg-green-500 hover:bg-green-600 text-white text-sm py-1.5 px-4 rounded-full transition-colors" onclick="goToVegetableLibrary()">
                            开始种植
                        </button>
                    </div>
                </div>
            </div>
        </section>

        <!-- 种植小提示模块 -->
        <section>
            <h3 class="text-lg font-semibold text-gray-800 mb-4">种植小提示</h3>
            <div id="dailyTipsList" class="space-y-3">
                <!-- 内容将通过JavaScript动态添加 -->
            </div>
        </section>
    </main>

    <!-- 底部导航Tab -->
    <nav class="tab-bar fixed bottom-0 left-0 right-0 flex items-center justify-around py-2">
        <a href="#" class="tab-item flex flex-col items-center py-2 px-3 text-primary font-medium" onclick="return false;">
            <i class="fa fa-home text-lg"></i>
            <span class="text-xs mt-1">首页</span>
        </a>
        <a href="growing-plants.html" class="tab-item flex flex-col items-center py-2 px-3 text-gray-500">
            <i class="fa fa-leaf text-lg"></i>
            <span class="text-xs mt-1">菜园</span>
        </a>
        <a href="task.html" class="tab-item flex flex-col items-center py-2 px-3 text-gray-500">
            <i class="fa fa-tasks text-lg"></i>
            <span class="text-xs mt-1">任务</span>
        </a>
        <a href="stats.html" class="tab-item flex flex-col items-center py-2 px-3 text-gray-500">
            <i class="fa fa-bar-chart text-lg"></i>
            <span class="text-xs mt-1">统计</span>
        </a>
        <a href="profile.html" class="tab-item flex flex-col items-center py-2 px-3 text-gray-500">
            <i class="fa fa-user text-lg"></i>
            <span class="text-xs mt-1">我的</span>
        </a>
    </nav>

    <script>
        // 页面加载时初始化
        window.addEventListener('load', initHomePage);
        
        // 跳转到各页面的函数
        function goToVegetableLibrary() { window.location.href = 'vegetable-library.html'; }
        function goToPlantingTips() { window.location.href = 'planting-tips.html'; }
        function goToLogs() { window.location.href = 'logs.html'; }
        function goToReminders() { window.location.href = 'reminders.html'; }
        function goToGrowingPlants() { window.location.href = 'growing-plants.html'; }
        
        // 初始化首页内容
        function initHomePage() {
            // 更新欢迎语
            updateWelcomeMessage();
            
            // 显示每日推荐小知识
            showDailyTips();
            
            // 显示菜园预览
            showGardenPreview();
        }
        
        // 更新欢迎语
        function updateWelcomeMessage() {
            const now = new Date();
            const hours = now.getHours();
            const welcomeTitle = document.getElementById('welcomeTitle');
            const welcomeSubtitle = document.getElementById('welcomeSubtitle');
            
            let title = '首页';
            let greeting = '欢迎回来，种植爱好者！';
            
            if (hours < 12) {
                title = '早上好';
                greeting = '开始美好的一天，来看看你的植物吧！';
            } else if (hours < 18) {
                title = '下午好';
                greeting = '阳光正好，适合给植物浇浇水哦～';
            } else {
                title = '晚上好';
                greeting = '忙碌了一天，来记录一下植物的生长吧！';
            }
            
            welcomeTitle.textContent = title;
            welcomeSubtitle.textContent = greeting;
        }
        
        // 显示每日小提示
        function showDailyTips() {
            const container = document.getElementById('dailyTipsList');
            container.innerHTML = '';
            
            // 预设一些种植小提示
            const allTips = [
                {
                    title: '浇水小提示',
                    icon: 'fa-tint',
                    content: '早晨浇水最佳，避免中午高温时浇水，容易烫伤植物根部。'
                },
                {
                    title: '种植小提示',
                    icon: 'fa-seedling',
                    content: '种子播种前可以用温水浸泡2-4小时，能提高发芽率。'
                },
                {
                    title: '光照小提示',
                    icon: 'fa-sun-o',
                    content: '大部分蔬菜需要6-8小时充足光照，南向阳台最适合种植。'
                },
                {
                    title: '施肥小提示',
                    icon: 'fa-pagelines',
                    content: '有机肥比化肥更安全，可以用厨余垃圾制作堆肥。'
                },
                {
                    title: '防虫小提示',
                    icon: 'fa-bug',
                    content: '定期检查叶片背面，发现虫害及时处理，可以用肥皂水喷洒。'
                },
                {
                    title: '温度小提示',
                    icon: 'fa-thermometer-half',
                    content: '大多数蔬菜适宜温度15-25℃，注意防寒保暖和遮阴降温。'
                },
                {
                    title: '湿度小提示',
                    icon: 'fa-cloud-rain',
                    content: '保持适当湿度，过于干燥或潮湿都不利于植物生长。'
                },
                {
                    title: '轮作小提示',
                    icon: 'fa-refresh',
                    content: '同一块地不要连续种植同科蔬菜，可以避免土壤养分失衡。'
                },
                {
                    title: '修剪小提示',
                    icon: 'fa-scissors',
                    content: '及时摘除老叶、病叶，促进新叶生长，提高通风透光。'
                },
                {
                    title: '记录小提示',
                    icon: 'fa-calendar-check-o',
                    content: '记录种植日期、浇水施肥时间，有助于总结经验提高成功率。'
                }
            ];
            
            // 随机选择3个提示
            const shuffledTips = allTips.sort(() => 0.5 - Math.random());
            const selectedTips = shuffledTips.slice(0, 3);
            
            // 显示种植小提示
            selectedTips.forEach((tip, index) => {
                const tipItem = document.createElement('div');
                tipItem.className = 'daily-tip-item bg-white rounded-2xl p-4 shadow-sm';
                tipItem.innerHTML = `
                    <div class="flex items-start space-x-3">
                        <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center text-green-600 shrink-0">
                            <i class="fa ${tip.icon}"></i>
                        </div>
                        <div>
                            <h4 class="font-medium text-gray-800">${tip.title}</h4>
                            <p class="text-sm text-gray-600 mt-1">${tip.content}</p>
                        </div>
                    </div>
                `;
                
                // 添加渐入动画
                tipItem.style.opacity = '0';
                tipItem.style.transform = 'translateY(20px)';
                tipItem.style.transition = `all 0.5s ease ${index * 0.1}s`;
                
                container.appendChild(tipItem);
                
                // 触发动画
                setTimeout(() => {
                    tipItem.style.opacity = '1';
                    tipItem.style.transform = 'translateY(0)';
                }, 100);
            });
        }
        
        // 显示菜园预览
        function showGardenPreview() {
            const container = document.getElementById('gardenPreview');
            
            // 从localStorage获取植物数据
            const plantsData = JSON.parse(localStorage.getItem('plants')) || [];
            
            // 如果有植物数据，显示最近的3个
            if (plantsData.length > 0) {
                container.innerHTML = '';
                
                // 获取最近种植的3个植物
                const recentPlants = plantsData
                    .sort((a, b) => new Date(b.plantingDate) - new Date(a.plantingDate))
                    .slice(0, 3);
                
                recentPlants.forEach(plant => {
                    const plantCard = document.createElement('div');
                    plantCard.className = 'flex items-center justify-between py-2 border-b last:border-0 border-gray-100';
                    
                    // 获取生长状态
                    const statusInfo = getGrowthStatus(plant);
                    
                    plantCard.innerHTML = `
                        <div class="flex items-center space-x-3">
                            <div class="w-10 h-10 rounded-full overflow-hidden bg-gray-100">
                                <img src="https://images.unsplash.com/photo-1599837507177-6007383f49d7?q=80&w=100&auto=format&fit=crop" alt="${plant.name}" class="w-full h-full object-cover">
                            </div>
                            <div>
                                <h4 class="font-medium text-gray-800">${plant.name}</h4>
                                <p class="text-xs text-gray-500">${statusInfo.days}天 · ${statusInfo.status}</p>
                            </div>
                        </div>
                        <div class="bg-green-100 text-green-700 text-xs px-2 py-1 rounded-full">
                            ${statusInfo.progress}%
                        </div>
                    `;
                    
                    container.appendChild(plantCard);
                });
            }
        }
        
        // 获取植物生长状态
        function getGrowthStatus(plant) {
            const plantingDate = new Date(plant.plantingDate);
            const now = new Date();
            const days = Math.floor((now - plantingDate) / (1000 * 60 * 60 * 24));
            const growthPeriod = plant.growthPeriod || 60; // 默认生长周期为60天
            const progress = Math.min(100, Math.floor((days / growthPeriod) * 100));
            
            let status = '生长中';
            if (progress >= 100) {
                status = '已成熟';
            } else if (progress >= 80) {
                status = '即将成熟';
            } else if (progress <= 10) {
                status = '发芽期';
            }
            
            return { days, progress, status };
        }
    </script>
</body>
</html>